<!--
 * @FileDescription: 注册表单
 * @Author: 叶永鸿、袁年政
 * @Date: 2021-7-17
 * @LastEditors: 叶永鸿
 * @LastEditTime: 2021-7-18
 -->
<template>
  <el-form class="registerForm sign-up-form">
    <el-tabs>
      <el-tab-pane label="Hr注册" name="first">
        <el-form
          ref="registerForm"
          :model="registerUser"
          :rules="registerRules"
          label-width="100px"
          class="registerForm sign-up-form"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="registerUser.name"
              placeholder="Enter UserName..."
            ></el-input>
          </el-form-item>
          <el-form-item label="companyId" prop="telephone">
            <el-input
              v-model="registerUser.telephone"
              placeholder="Enter companyId..."
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registerUser.password"
              type="password"
              placeholder="Enter Password..."
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input
              v-model="registerUser.password2"
              type="password"
              placeholder="Enter Password..."
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="选择身份">
            <el-select v-model="registerUser.role" placeholder="请选择身份">
              <el-option label="管理员" value="admin"></el-option>
              <el-option label="用户" value="user"></el-option>
              <el-option label="游客" value="visitor"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <el-button
              @click="handleHrRegister('registerForm')"
              type="primary"
              class="submit-btn"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="员工注册" name="second">
        <el-form
          ref="registerForm"
          :model="registerUser"
          :rules="registerRules"
          label-width="100px"
          class="registerForm sign-up-form"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="registerUser.name"
              placeholder="Enter UserName..."
            ></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="telephone">
            <el-input
              v-model="registerUser.telephone"
              placeholder="Enter Telephone..."
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registerUser.password"
              type="password"
              placeholder="Enter Password..."
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input
              v-model="registerUser.password2"
              type="password"
              placeholder="Enter Password..."
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="选择身份">
            <el-select v-model="registerUser.role" placeholder="请选择身份">
              <el-option label="管理员" value="admin"></el-option>
              <el-option label="用户" value="user"></el-option>
              <el-option label="游客" value="visitor"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <el-button
              @click="handleEmpRegister('registerForm')"
              type="primary"
              class="submit-btn"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script lang="ts">
import { getCurrentInstance, ref, computed } from "vue";
import router from "@/router";
import axios from "axios";
import { ElMessage } from "element-plus";

import { useStore } from "vuex";
import { LoginState } from "@/store";

export default {
  props: {
    registerUser: {
      type: Object,
      required: true,
    },
    registerRules: {
      type: Object,
      required: true,
    },
  },
  setup() {
    // @ts-ignore
    const { proxy } = getCurrentInstance();

    const store = useStore<LoginState>();
    const loginInfor = computed(() => store.state.loginInfor);

    const getLoginInfor = computed(() => store.getters.getUserInfor);

    const handleHrRegister = (formName: string) => {
      //hr注册按钮函数，首先为hr进行注册，然后自动为hr登录并跳转页面。
      proxy.$refs[formName].validate((valid: boolean) => {
        if (valid) {
          axios
            .get("http://47.100.167.206:8082/Register/RegisterHR", {
              params: {
                username: proxy.registerUser.name,
                password: proxy.registerUser.password,
                companyid: proxy.registerUser.telephone,
              },
            })
            .then(
              function (response) {
                console.log(response)
                if (response.data.message == "repeatedusername") {
                  ElMessage({
                    message: "用户名已存在，请重新输入。。。",
                    type: "error",
                  });
                } else if (response.data.message == "companyidrepeated") {
                  ElMessage({
                    message: "该公司id已被注册，请重新输入。。。",
                    type: "error",
                  });
                } else if (response.data.message == "invalidcompanyid") {
                  ElMessage({
                    message: "公司id非法，请重新输入。。。",
                    type: "error",
                  });
                } else if (response.data.message == "successregister") {
                  ElMessage({
                    message: "成功注册，正在为您跳转。。。",
                    type: "success",
                  });
                  axios
                    .get(
                      "http://47.100.167.206:8082/Login/LoginHR?username=" +
                        proxy.registerUser.name +
                        "&password=" +
                        proxy.registerUser.password
                    )
                    .then(
                      function (response: any) {
                        //alert("成功接收")
                        console.log(response);
                        if ((response.data.message = "successlogin")) {
                          //console.log(response);
                          ElMessage.success({
                            message: "登录成功",
                            type: "success",
                          });
                          //console.log(store.getters.getUserInfor);
                          store.commit("login", {
                            userName: proxy.registerUser.name,
                            station: 2,
                            token: response.headers.token,
                          });
                          localStorage.setItem("userInfor",JSON.stringify(proxy.$store.state.loginInfor))
                          console.log(store.getters.getUserInfor.token);
                          console.log(store.getters.getUserInfor.station);
                          router.push("/hrMain");
                        } else {
                          alert("密码或用户名错误，请重新输入");
                        }
                      },
                      function (err: any) {
                        alert("网络错误，登录失败");
                        console.log(err);
                      }
                    );
                } else {
                  ElMessage({
                    message: "出现未知错误。。。",
                    type: "error",
                  });
                }
              },
              function (err) {}
            );
          //alert("submit!");
          //router.push("/hrMain");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const handleEmpRegister = (formName: string) => {
      //先为员工注册，然后自动为员工登录并跳转
      proxy.$refs[formName].validate((valid: boolean) => {
        if (valid) {
          //alert("submit!");
          //router.push("/emMain");
          axios
            .get("http://47.100.167.206:8082/Register/RegisterEmpSelf", {
              params: {
                username: proxy.registerUser.name,
                password: proxy.registerUser.password,
                telephone: proxy.registerUser.telephone,
              },
            })
            .then(
              function (response) {
                console.log(response)
                if (response.data.message == "repeatedusername") {
                  ElMessage({
                    message: "用户名已存在，请重新输入。。。",
                    type: "error",
                  });
                } else if (response.data.message == "repeatedtelephone") {
                  ElMessage({
                    message: "该手机号码已被注册，请重新输入。。。",
                    type: "error",
                  });
                } else if (response.data.message == "success") {
                  ElMessage({
                    message: "注册成功，正在为您跳转。。。",
                    type: "success",
                  });
                  axios
                    .get("http://47.100.167.206:8082/Login/LoginEmp", {
                      params: {
                        username: proxy.registerUser.name,
                        password: proxy.registerUser.password,
                      },
                    })
                    .then(
                      function (response: any) {
                        //alert("成功接收")
                        console.log(response);
                        store.commit("login", {
                          userName: proxy.registerUser.name,
                          station: 1,
                          token: response.headers.token,
                        });
                        localStorage.setItem("userInfor",JSON.stringify(proxy.$store.state.loginInfor))
                        ElMessage.success({
                          message: "登录成功",
                          type: "success",
                        });
                        console.log(store.getters.getUserInfor.token);
                        console.log(store.getters.getUserInfor.station);

                        router.push("/emMain");
                      },
                      function (err: any) {
                        alert("网络错误，登录失败，请刷新页面重新登陆");
                        console.log(err);
                      }
                    );
                } else {
                  ElMessage({
                    message: "出现未知错误。。。",
                    type: "error",
                  });
                }
              },
              function (err) {}
            );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    return { handleHrRegister, handleEmpRegister };
  },
};
</script>
<style scoped>
</style>